@extends('common.base-master')

@section('html-head')
    <link rel="stylesheet" type="text/css" href="{{url('slick/slick.css')}}"/>
    <script src="{{url('js/mui.min.js')}}"></script>
    <script type="text/javascript" src="{{url('js/hmt.js')}}" ></script>
    <script src="{{url('slick/slick.js')}}" type="text/javascript" ></script>
    <script type="text/javascript" src="{{url('js/shopcar.js')}}" ></script>
    <!--插件-->
    <link rel="stylesheet" href="{{url('css/swiper.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{url('css/common.css')}}"/>

    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{url('/css/main.css')}}">
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
@endsection

@section('html-body')
    <div id="body">
        <header class="mui-bar mui-bar-nav report-header box-s" id="header" style="background-color: #49cabf">
            <a href="javascript:history.go(-1)"><i class="iconfont icon-fanhui fl"></i></a>
            <p style="width: 90%;">在线缴费</p>
            {{--<span class="fr baocun"><a href="#" id="btn_save">保存</a></span>--}}
        </header>
        <div id="bespeak-list" style="margin-top: 65px">
        @foreach($packages as $package)
            @if($package)
        <!-- 套餐列表 -->
            <div class="full-row-list">
                <div class="list-group">
                  <div class="img-wrapper">
                      <img title="套餐图" src="{{route('Api.Image.ShowPX',[$package->pak_img,'100px'])}}">

                  </div>
                  <div class="info-wrapper">
                      <p >{{$package->pak_name}}</p>
                      <p>{{$package->pak_detail}}</p>
                      <p class="cost">检查费:￥{{$package->consulting_fee}}</p>
                      <p class="cost">预约金: <span>￥{{$package->bespeak_fee}}</span></p>
                  </div>

                  <div class="extra-info" style="margin-right: 5px;margin-bottom: 1px">
                      <span >
                          <a  class="fui-icon-col external" href="{{route('M.Home.packageDetail',[$package->id])}}" data-nocache="true">
                          详情</a>
                      </span>
                      </a>
                  </div>
                </div>
            </div>
            @endif
        @endforeach
        </div>
    </div>
    <div style="height: 45px;">
        @if($packages && count($packages)>=10)
            <button  id="more-btn" style="width: 100%;height: 100%;border-width: 0;background-color: #CCFFCC"><h5>点击加载更多</h5></button>
        @endif
    </div>
    <script>
        var page = 0;

        $('#more-btn').click(function () {
            page ++;
            var imgUrl = "{{url('/api/image')}}";
            var detailUrl = "{{url('/m/package-detail')}}";
            $.get('/api/append-packages/' + page, function (data, res) {
                for (var i = 0;i< data.data['count'] ;i++){

                    $('#bespeak-list').append('<div class="full-row-list">'+
                            '<div class="list-group">'+
                            '<div class="img-wrapper">'+
                            '<img title="套餐图" src="'+imgUrl+'/'+data.data['data'][i].pak_img+'/show/100px">'+
                            '</div>'+
                            '<div class="info-wrapper">'+
                            '<p >' + data.data['data'][i].pak_name + '</p>'+
                            '<p>'+data.data['data'][i].pak_detail+'</p>'+
                            '<p class="cost">检查费:￥'+data.data['data'][i].consulting_fee+'</p>'+
                    '<p class="cost">预约金: <span>￥'+data.data['data'][i].bespeak_fee+'</span></p>'+
                    '</div>'+
                    '<div class="extra-info" style="margin-right: 5px;margin-bottom: 1px">'+
                            '<a  class="fui-icon-col external" href="'+detailUrl+'/'+data.data['data'][i].id+'" data-nocache="true">'+
                            '<span >详情</span>'+ '</a> </div> </div> </div>');
                }
                if (data.data['count']<10){
                    $('#more-btn').text('没有更多了哟');
                    $('#more-btn').css('background-color','#CCCCCC');
                    $('#more-btn').attr('disabled',true);
                }
            });

        });
    </script>
@endsection
